<template>
  <div class='alarm-images-wrapper'>
    <div class="list alarm-video">
      <custom-title title="报警录像"></custom-title>
      <div class="list alarm-image">
        <div class="img-item img-container" v-for="(item,index) in alarmImageList" :key="index">
          <img :src="item" class="image"/>
          <div class="img-contaienr__footer"></div>
        </div>
      </div>
    </div>
    <div class="list alarm-video">
      <custom-title title="报警录像"></custom-title>
    </div>
  </div>
</template>

<script>
import { getAlarmDetail } from '@/api'
export default {
  props: {
    value: {
      require: true
    }
  },
  data() {
    return {
      alarmImageList: [],
    };
  },
  computed: {},
  watch: {
    value: {
      handler(newVal) {
        this.getList(newVal)
      },
    }
  },
  methods: {
    async getList(data) {
      getAlarmDetail(data.alarmId).then(res=> {
        this.alarmImageList = res.data.alarmPics
      })
    }
  },
  components: {},
}
</script>

<style lang='less' scoped>
.alarm-images-wrapper {
  .list {
    min-height: 180px;
    margin-bottom: 15px;   
  }
  .alarm-image {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    .img-item {
      width: 270px;
      height: 180px;
    }
  }
}  
</style>